import { unstable_HistoryRouter as BrowserRouter, Routes, Route } from "react-router-dom"
import AuthComponent from '@/components/AuthComponent'
import 'antd/dist/reset.css'
import './App.css'
import { history } from "@/utils"
import { lazy, Suspense } from "react"
const Login = lazy(() => import('./pages/Login'))
const Layout = lazy(() => import('./pages/Layout'))
const Home = lazy(() => import('./pages/Home'))
const Article = lazy(() => import('./pages/Article'))
const Publish = lazy(() => import('./pages/Publish'))

function App () {
  return (
    <BrowserRouter history={history}>
      <div className="App">
        <Suspense
          fallback={
            <div
              style={{
                textAlign: 'center',
                marginTop: 200
              }}
            >
              loading...
            </div>
          }
        >
          <Routes>
            <Route path='/' element={<AuthComponent><Layout /></AuthComponent>}>
              <Route index element={<Home />}></Route>
              <Route path="/publish" element={<Publish />}></Route>
              <Route path="/article" element={<Article />}></Route>
            </Route>
            <Route path='/login' element={<Login />}></Route>
          </Routes>
        </Suspense>
      </div>
    </BrowserRouter>

  )
}

export default App
